<template>
  <div class="page">
    <!--顶部-->
    <div class="flex justify-center" id="navigation">
        <span class="logo" @click="toMain2">非诚勿扰</span>
        <span class="username">{{name}}</span>
        <el-dropdown style="position: absolute; right: 3%;">
          <el-image class="userImage" :src="elImagesrc"></el-image>
          <template #dropdown>
            <el-dropdown-menu style="background: #fcdd44">
              <el-dropdown-item @click="toPersonal()">个人中心</el-dropdown-item>
              <el-dropdown-item @click="toChatPage()">进入聊天</el-dropdown-item>
              <el-dropdown-item @click="toLogin()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <el-image :src="banner[type].image" class="elImage"></el-image>
      <div class="typeTitle">{{banner[type].title}}</div>

      <div class="flex flex-wrap justify-center" style="padding-right:25px; position: relative; width: 80%; margin: auto">
        <el-card class="script" v-for="item in scripts" :key="item">
          <div class="thread"></div>
          <el-image class="scriptImage" :src="item.icon"></el-image>
          <div class="scriptTitle">{{item.title}}</div>
          <div class="scriptView">
            <el-icon :size="25" color="gray"><Message /></el-icon>
            <div class="view" @click="view(item.id)">查看</div>
          </div>
          <div class="scriptChat">
            <el-icon :size="25" color="gray"><ChatDotRound /></el-icon>
            <div class="chat" @click="toChat(item)">聊天</div>
          </div>
        </el-card>
      </div>

      <!--占位符-->
      <div style="height: 50px"></div>

      <div class="black_overlay" v-if="blackOver">
        <div style="position: relative">
          <el-icon class="closeIcon" :size="30" @click="mouseclose()"><Close /></el-icon>
          <el-image :src="blackData.icon" class="imageBlack"></el-image>
        </div>
        <div style="color: #fff; margin-top: 3%;">{{blackData.content}}</div>
      </div>
  </div>
</template>

<script>
import scriptAPI from '@/api/scriptAPI';
import commonAPI from '@/api/commonAPI';
import chatAPI from '@/api/chatAPI';
import img0 from '@/assets/1500 x 375/sport.png';
import img1 from '@/assets/1500 x 375/love.png';
import img2 from '@/assets/1500 x 375/game.png';
import img3 from '@/assets/1500 x 375/study.png';
import img4 from '@/assets/1500 x 375/competition.png';
import img5 from '@/assets/1500 x 375/eat.png';
import img6 from '@/assets/1500 x 375/unusual.png';
export default {
    data(){
      return{
          blackOver: false,

          //标题与顶部图片
          banner:[{
            image: img0,
            title: "Sport"
          },{
            image: img1,
            title: "Love"
          },{
            image: img2,
            title: "Game"
          },{
            image: img3,
            title: "Study"
          },{
            image: img4,
            title: "competition"
          },{
            image: img5,
            title: "Eat"
          },{
            image: img6,
            title: "Unusual Thinking"
          }],

          swiperOption: {
            loop: true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            // 显示分页
            pagination: {
              el: ".swiper-pagination",
              clickable: true, //允许分页点击跳转
            },
            // 设置点击箭头
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          },

          scripts: "",

          blackData: "",

          iconStorage: "",

          type: null,

        elImagesrc:this.$store.getters["user/getUserAvatar"],
        name:this.$store.getters["user/getUserName"],
      }
    },

    created(){
      this.type = this.$route.query.type;
      this.getScripts();
    },

    methods:{
      toLogin(){
        this.$router.push("/login");
      },

      toPersonal(){
        this.$router.push({
            path: '/personal',
            query:{
              userId: this.$store.getters["user/getUserId"]
            }
        })
      },
      toChatPage(){
        this.$router.push("/chat")
      },
      toMain2(){
        this.$router.push("/main")
      },

      async view(id){
        this.blackOver = true;
        await scriptAPI.getScriptInfo(id).then(res =>{
          console.log(res);
          this.blackData = res.data;
          console.log(this.blackData)
          this.download(this.blackData.pictures)
        })
      },

      mouseclose(){
        this.blackOver = false
      },

      async toChat(data){
        let data1 ={
          noteId: data.id
        }
        if(data.privateChat){
            await chatAPI.setChat(data1).then(res=>{
            console.log(res)
            this.$router.push("/chat");
          })
        }
        else{
            await chatAPI.setGroup(data1).then(res=>{
            console.log(res)
            this.$router.push("/chat");
          })
        } 
      },

      async getScripts(){
        await scriptAPI.getTypeScript(0, 16, this.type).then(res =>{
          console.log(res);
          this.scripts = res.data;
          this.scripts.forEach((item,index) =>{
          this.download1(index)
         })
       })
      },

      async download1(index){
        await commonAPI.download(this.scripts[index].icon).then(res =>{
          let binaryData = [];
          binaryData.push(res);
          this.iconStorage = window.URL.createObjectURL(new Blob(binaryData))
          this.scripts[index].icon = window.URL.createObjectURL(new Blob(binaryData));
          console.log(this.scripts[index].icon)
        })
      },

      async download(icon){
        console.log(icon)
        await commonAPI.download(icon).then(res =>{
          let binaryData = [];
          binaryData.push(res);
          this.iconStorage = window.URL.createObjectURL(new Blob(binaryData))
          this.blackData.icon = this.iconStorage;
        })
      },
    }
};
</script>

<style scoped>
.page{
  background-color: #fdfdfdd9;
}
#navigation{
  position: relative;
  height: 80px;
  background-color: #000000;
}
.logo {
  position: absolute;
  color: #fcdd44;
  font-size: 27px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 80px;
  font-family: "KaiTi";
  left: 9%;
}
.logo:hover,
.logo:focus {
  color: #ff720b;
}
.username {
  position: absolute;
  color: #f5eaeac6;
  line-height: 80px;
  font-size: 20px;  
  font-family: 'STXingkai';
  font-weight: lighter;
  right: 8%;
}
.parentList{
  color: #fcdd44;
  margin-top: 60%;
  font-size: 16.5px;
  font-weight: bold;
}
.parentAvatar{
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.messageList{
  color: #fcdd44;
  margin-top: 60%;
  font-size: 16.5px;
  font-weight: bold;
}
.message{
  height: 30px;
  width: 30px;
  margin-top: 7px
}
.userImage {
  height: 60px;
  width: 60px;
  margin-left: 1%;
  margin-top: 10px;
  border-radius: 50%;
}
.elImage{
  width: 100%;;
  height: 375px;
}
.typeTitle{
  font-size: 45px;
  font-weight: lighter;
  margin-top: 100px;
  margin-bottom: 100px;
}

.script{
  position: relative;
  width: 250px;
  height: 300px;
  border-radius: 3%;
  margin-left: 1.7%;
  margin-bottom: 2%;
}
.thread{
  position: absolute;
  width: 140px;
  height: 5px;
  border-top: #282aa3 solid 5px;
  top: 0%;
  left: 55px;
}
.scriptImage{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 22%;
  left: 31%;
}

.scriptTitle{
  position: absolute;
  top: 61%;
  width: 85%;
  height: 50px;
  font-size: 18px;
  word-break: break-all;
  justify-items: center;
}

.scriptView{
  position: absolute;
  top: 82%;
  left: 12%;
  font-weight: lighter;
  display: flex;
  flex-direction: row;
}

.scriptChat{
  position: absolute;
  top: 82%;
  right: 12%;
  font-weight: lighter;
  display: flex;
  flex-direction: row;
}

.view{
  margin-left: 10px;
  color: gray;
}

.view:hover{
  color: blue;
}

.chat{
  margin-left: 10px;
  color: gray;
}

.chat:hover{
  color: purple;
}

.black_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.imageBlack{
  width: 350px;
  height: 280px;
  margin-top: 3%;
  border: #eae9e7 solid 5px;
  border-radius: 10px ;
}
.closeIcon{
  position: absolute;
  color: #fff;
  left: 63%;
  top: 5%;
}
.closeIcon:hover{
  transform: scale(1.4);
}

.blackText{
  color: #fff;
  font-weight: lighter; 
  letter-spacing: 2px; 
  font-size: 22px; 
  width: 680px; 
  word-break: break-all; 
  margin: auto; 
  margin-top: 3%;
  text-align: left;
  font-family: "KaiTi";
  font-weight: lighter;
  z-index: 2;
}
</style>